<template>
    <div class="login">
        <div v-if="state.type=='login'" class="login-body login">

            <s-header :name="'登录'"></s-header>

            <form @submit.prevent="onSubmit">
                
                <div class="field">
                    <label for="username">用户名</label>
                    <input type="text" id="username" v-model="state.username" placeholder="用户名" required>
                </div>

                <div class="field">
                    <label for="password">密码</label>
                    <input type="password" id="password" v-model="state.password" placeholder="密码" required>
                </div>

                <div class="field verify-field">
                    <label for="verify">验证码</label>
                    <input type="text" id="verify" v-model="state.verify" placeholder="输入验证码">
                    <vue-img-verify ref="verifyRef" class="verify-btn" @click="onVerify" />
                </div>

                <div class="action-area">
                    <div class="link-register" @click="toggle('register')">立即注册</div>
                    <button type="submit" class="login-button">登录</button>
                </div>
            </form>

        </div>

        <div v-else class="login-body register">
            <!-- 注册表单 -->
            <s-header :name="'注册'"></s-header>

            <form @submit.prevent="onSubmit">
                
                <div class="field">
                    <label for="username">用户名</label>
                    <input type="text" id="username" v-model="state.username1" placeholder="用户名" required>
                </div>

                <div class="field">
                    <label for="password">密码</label>
                    <input type="password" id="password" v-model="state.password1" placeholder="密码" required>
                </div>

                <div class="field verify-field">
                    <label for="verify">验证码</label>
                    <input type="text" id="verify" v-model="state.verify" placeholder="输入验证码">
                    <vue-img-verify ref="verifyRef" class="verify-btn" @click="onVerify" />
                </div>

                <div class="action-area">
                    <div class="link-login" @click="toggle('login')">已有登录账号</div>
                    <button type="submit" class="login-button">立即注册</button>
                </div>
            </form>
        </div>
    </div>
</template>



<script setup>
import sHeader from '../components/SimpleHeader.vue'
import { reactive } from "vue";
import vueImgVerify from '../components/VueImageVerify.vue'

const state=reactive({
  username: '',
  password: '',
  username1: '',
  password1: '',
  type: 'login',
  imgCode: '',//这是生成的验证码
  verify: ''//这是输入验证码
})

const toggle=(v)=>{
    state.type=v
    state.verify=''
}
</script>

<style lang="less" scoped>
.login {
    width: 1200px;
    // height: 90vh;
    .login-body {
        padding: 0 20px;
        width: 500px;
        margin: 0 auto;
    }
    .field {
        margin-bottom: 16px;
        display: flex;
        width: 400px;
        // height: 100px;
        height: 40px;
        label {
            display: block;
            width: 80px;
            margin-bottom: 8px;
            line-height: 40px;
        }
        input {
            width: 200px;
           
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            outline: none;
        }
    }
    .verify-field {
        .verify-btn {
            width: 100px;
            // height: 36px;
            margin-left: 8px;  // 间隔
        }
    }
    .action-area {
        margin: 16px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        .link-register {
            color: #1989fa;
            margin-bottom: 16px;
            cursor: pointer;
        }
        .link-login{
            color: #1989fa;
            margin-bottom: 16px;
            cursor: pointer;
        }
        .login-button {
            width: 100%;
            border-radius: 20px;
            background-color: #1baeae;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
        }
    }
}
</style>


